<template>
  <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
  >
    <el-form-item label="购买人姓名" prop="name">
      <el-input v-model="ruleForm.name" placeholder="请输入购买人姓名" />
    </el-form-item>
    <el-form-item label="购买单位" prop="danwei">
      <el-input v-model="ruleForm.danwei" placeholder="请输入购买单位" />
    </el-form-item>
    <el-form-item label="联系方式" prop="number">
      <el-input v-model="ruleForm.number" placeholder="请输入联系方式"/>
    </el-form-item>
    <el-form-item label="购买产品" prop="region">
      <div class="m-4">
        <el-cascader
            v-model="value"
            :options="optionselect"
            :props="props"
            @change="handleChange"
        />
      </div>
    </el-form-item>
    <el-form-item label="购买数量" prop="count">
      <el-select-v2
          v-model="ruleForm.count"
          placeholder="count"
          :options="options"
      />
    </el-form-item>
    <el-form-item label="交付日期" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker
              v-model="ruleForm.date1"
              type="date"
              aria-label="最早交付时间"
              placeholder="最晚交付时间"
              style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col class="text-center" :span="2">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-form-item prop="date2">
          <el-time-picker
              v-model="ruleForm.date2"
              aria-label="Pick a time"
              placeholder="最晚交付时间"
              style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="货运方式" prop="location">
      <el-segmented v-model="ruleForm.location" :options="locationOptions" />
    </el-form-item>
    <el-form-item label="优选服务" prop="type">
      <el-checkbox-group v-model="ruleForm.type">
        <el-checkbox value="Online activities" name="type">
          保修期1年
        </el-checkbox>
        <el-checkbox value="Promotion activities" name="type">
          保修期2年+半年无理由换货
        </el-checkbox>
        <el-checkbox value="Offline activities" name="type">
          7天无理由退货
        </el-checkbox>
        <el-checkbox value="Simple brand exposure" name="type">
          器械清洁服务
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="选择支付方式" prop="resource">
      <el-radio-group v-model="ruleForm.resource">
        <el-radio value="Sponsorship">支付宝</el-radio>
        <el-radio value="Venue">微信</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="详细地址" prop="desc">
      <el-input v-model="ruleForm.desc" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        创建订单
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      <el-button @click="test()">test</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

import request from "../utils/request"
import axios from "axios";
import {ElMessage} from "element-plus";

interface RuleForm {
  name: string
  region: string
  danwei:string
  count: number
  number:string
  date1: string
  date2: string
  location: string
  type: string[]
  resource: string
  desc: string
}
const value = ref([])

const props = {
  expandTrigger: 'hover' as const,
}

const handleChange = (value) => {
  console.log(value)
}

const optionselect = [
  {
    value: 'yxl',
    label: '影像类',
    children: [
      {
        value: '彩色超声多普勒治疗仪',
        label: '彩色超声多普勒治疗仪',
      },
      {
        value: 'C臂型X光机',
        label: 'C臂型X光机',
      },
      {
        value: 'CT控制盒',
        label: 'CT控制盒',
      },
      {
        value: 'CT机',
        label: 'CT机',
      },
    ],
  },
  {
    value: 'kfl',
    label: '康复类',
    children: [
      {
        value: '下肢辅助行走设备',
        label: '下肢辅助行走设备',
      },
      {
        value: '牵引器',
        label: '牵引器',
      },
      {
        value: '代步轮椅',
        label: '代步轮椅',
      },
      {
        value: '外骨骼机器人',
        label: '外骨骼机器人',
      },
    ],
  },
  {
    value: 'sys',
    label: '实验室类',
    children: [
      {
        value: '纯水仪',
        label: '纯水仪',
      },
      {
        value: '稀释仪',
        label: '稀释仪',
      },
      {
        value: '血浆机',
        label: '血浆机',
      },
      {
        value: 'X荧光分析仪',
        label: 'X荧光分析仪',
      },
    ],
  },
  {
    value: 'jtl',
    label: '家庭类',
    children: [
      {
        value: '脑波设备',
        label: '脑波设备',
      },
      {
        value: '老人陪护机器人',
        label: '老人陪护机器人',
      },
      {
        value: '颈椎治疗仪',
        label: '颈椎治疗仪',
      },
      {
        value: '护眼仪',
        label: '护眼仪',
      },
    ],
  },
  {
    value: '检测类',
    label: '检测类',
    children: [
      {
        value: '血糖检测仪',
        label: '血糖检测仪',
      },
      {
        value: '心电监测仪',
        label: '心电监测仪',
      },
      {
        value: '点滴警报仪',
        label: '点滴警报仪',
      },
      {
        value: 'BMI测试仪',
        label: 'BMI测试仪',
      },
    ],
  },
  {
    value: 'zll',
    label: '治疗类',
    children: [
      {
        value: '制氧机',
        label: '制氧机',
      },
      {
        value: '雾化器',
        label: '雾化器',
      },
    ],
  },
]

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: '',
  danwei:'',
  region: '',
  number:'',
  count: 0,
  date1: '',
  date2: '',
  location: '',
  type: [],
  resource: '',
  desc: '',
})


const orderForm = reactive({
  buyer: '',
  deviceName: '',
  count:0,
  totalPrice:""

})

const locationOptions = ['陆运', '海运', '空运']

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: '请输入中文！', trigger: 'blur' },
    { min: 2, max: 5, message: '长度应在2到4个字', trigger: 'blur' },
  ],
  danwei: [
    {
      required: true,
      message: '请输入单位名称',
      trigger: 'change',
    },
  ],
  count: [
    {
      required: true,
      message: '选择你要购买的数量',
      trigger: 'change',
    },{ min: 1, max: 20, message: '最多能定20台', trigger: 'blur' },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  location: [
    {
      required: true,
      message: 'Please select a location',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: '请至少勾选一项优选服务',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  desc: [
    { required: true, message: '不要让地址栏为空', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {


  // console.log(ruleForm)

  // console.log(value.value.values())


  orderForm.buyer = ruleForm.name
  orderForm.count =ruleForm.count
  orderForm.deviceName = value.value[1]
  // console.log(orderForm.deviceName)
  const min = 90000;
  const max = 1000000;
  orderForm.totalPrice = String(Math.floor(Math.random() * (max - min + 1)) + min);

  axios.post("http://localhost:9091/order/add",orderForm).then(res=>{
    console.log(res)
  })




  console.log(orderForm)

    ElMessage({
        message: '订单创建成功',
        type: 'success',
        plain: true,
    })



  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const test = ()=>{
  console.log(1)
  request.get("http://localhost:9091/devices/test").then(res=>{
    console.log(res.data)
  })
  // this.axios.get("http://localhost:9091/devices/test").then((response) => {
  //     console.log(response)
  // })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
</script>
